<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 基础表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="/css/plugins/kkpager/kkpager_blue.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css?v=4.0.0" rel="stylesheet">
<base target="_blank">

</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">


		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>题目展示</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="table_basic.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="table_basic.html#">选项1</a></li>
								<li><a href="table_basic.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<div class="row">
							<div class="col-sm-5 m-b-xs">
								<select class="input-sm form-control input-s-sm inline"
									id="topicType">
									<option value="0">全部</option>
									<option value="1">单选题</option>
									<option value="2">多选题</option>
									<option value="3">简答题</option>
								</select>
							</div>
							<div class="col-sm-4 m-b-xs">
								<select class="input-sm form-control input-s-sm inline"
									id="topicOrder">
									<option value="ASC">升序</option>
									<option value="DESC">降序</option>
								</select>
							</div>
							<div class="col-sm-3">
								<div class="input-group">
									<input type="text" placeholder="请输入关键词"
										class="input-sm form-control" id="keyWord"> <span
										class="input-group-btn">
										<button type="button" id="queryBtn"
											class="btn btn-sm btn-primary">搜索</button>
									</span>
								</div>
							</div>
						</div>
						<div class="tab-content">
							<div id="tab-1" class="tab-pane active">
								<div class="full-height-scroll">
									<div class="table-responsive">
										<input type="hidden" id="totalPage"> <input
											type="hidden" id="totalRows"> <input type="hidden"
											id="currentPage">
										<table class="table table-striped">
											<thead>
												<tr>
													<th>序号</th>
													<th>题目内容</th>
													<th>题型</th>
													<th>分类</th>
													<th>更新时间</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody id="main_content">
												<div class="ibox-content" display="none">
													<div style="position: absolute; left: 50%; top: 30%">
														<div class="spiner-example" id="loading"
															style="display: none">
															<div class="sk-spinner sk-spinner-fading-circle">
																<div class="sk-circle1 sk-circle"></div>
																<div class="sk-circle2 sk-circle"></div>
																<div class="sk-circle3 sk-circle"></div>
																<div class="sk-circle4 sk-circle"></div>
																<div class="sk-circle5 sk-circle"></div>
																<div class="sk-circle6 sk-circle"></div>
																<div class="sk-circle7 sk-circle"></div>
																<div class="sk-circle8 sk-circle"></div>
																<div class="sk-circle9 sk-circle"></div>
																<div class="sk-circle10 sk-circle"></div>
																<div class="sk-circle11 sk-circle"></div>
																<div class="sk-circle12 sk-circle"></div>
															</div>
														</div>
													</div>
												</div>
											</tbody>
										</table>
										<div class="btn-group">
											<div id="kkpager"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<!-- 全局js -->
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>



	<!-- Peity -->
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>
	<!-- layer javascript -->
	<script src="/js/plugins/layer/layer.min.js"></script>
	<!-- 自定义js -->
	<script src="/js/content.js"></script>
	<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="/js/plugins/kkpager/kkpager.min.js"></script>

	<!-- iCheck -->
	<script src="/js/plugins/iCheck/icheck.min.js"></script>

	<!-- Peity -->
	<script src="/js/demo/peity-demo.js"></script>

	<script>
		$(document).ready(function() {
			$('.i-checks').iCheck({
				checkboxClass : 'icheckbox_square-green',
				radioClass : 'iradio_square-green',
			});
			$('.full-height-scroll').slimScroll({
				height : '100%'
			});

		});
	</script>
	<script>
		function getParameter(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
		function GetExcelTable(pageindex) {
			$("#main_content").empty();
			var type = $("#topicType").val();
			var order = $("#topicOrder").val();
			var keyWord = $("#keyWord").val();
			// ajax请求分页
			$.ajax({
				url : '/topic/query/page',
				dataType : "json",
				type : "POST",
				data : {
					"pageNum" : pageindex,
					"type" : type,
					"order" : order,
					"keyWord" : keyWord
				},
				beforeSend : function(XMLHttpRequest) {
					// 开启加载动画
					$("#loading").css("display", "");
				},
				success : function(data) {

					if (data.listNum == 0) {

					$("#main_content").html(" <td colspan='6'><div class='alert alert-success col-sm-12' style='text-align:center'>"
							+ " 暂无数据"
							+ " </div></td>");
					}

					var list = data.list;
					// 遍历结果集中的list元素，拼接成html
					$(list).each(function(n, value) {
						var $tr = "<tr>"
							+ "<td>"
							+ (data.begin + n + 1)
							+ "</td>"
							+ "<td>"
							+ value.topicContent.substring(0,20)+ "...</td>"
							+ "<td>"
							+ ((value.name === null) ? "无": value.name)
							+ "</td>"
							+ "<td>"
							+ ((value.categoryName === null) ? "无": value.categoryName)
							+ "</td>"
							+ "<td>"
							+ fmtDate(value.updateTime)
							+ "</td>"
							+ "<td>"
							+ " <button class='btn btn-primary btn-circle detailBtn' data-id = ' " + value.topicId + " ' type='button' ><i class='fa fa-info'></i>"
							+ "</button>"
							+ " <button class='btn btn-primary btn-circle editBtn' data-id = ' " + value.topicId + " ' type='button' ><i class='fa fa-list'></i>"
							+ "</button>"
							+ "<button class='btn btn-warning btn-circle deleteBtn' data-id = ' " + value.topicId + " ' type='button'><i class='fa fa-times'></i>"
							+ "</button>" + "</td>"
							+ "</tr>";
						// 向页面添加拼接好的页面元素；
						$("#main_content").append($tr);
					});

					$(".editBtn").bind("click",function() {
						//iframe窗
						var topId = $(this).attr("data-id");
							layer.open({
								type : 2,
								title : false,
								closeBtn : 0, //不显示关闭按钮
								shade : [ 0 ],
								area : [ '340px'],
								offset : 'rb', //右下角弹出
								time : 2000, //2秒后自动关闭
								anim : 2,
								content : ['/topic/editPage?topicId='+ topId,'no' ], //iframe的url，no代表不显示滚动条
								end : function() { //此处用于演示
									layer.open({
										type : 2,
										title : '题目编辑',
										shadeClose : true,
										shade : false,
										maxmin : true, //开启最大化最小化按钮
										area : ['893px','600px' ],
										content : '/topic/editPage?topicId='+ topId
						     		});
								}
							});
						});
					
					$(".detailBtn").bind("click",function() {
						//iframe窗
						var topId = $(this).attr("data-id");
							layer.open({
								type : 2,
								title : false,
								closeBtn : 0, //不显示关闭按钮
								shade : [ 0 ],
								area : [ '340px'],
								offset : 'rb', //右下角弹出
								time : 2000, //2秒后自动关闭
								anim : 2,
								content : ['/topic/topicDetail?topicId='+ topId,'no' ], //iframe的url，no代表不显示滚动条
								end : function() { //此处用于演示
									layer.open({
										type : 2,
										title : '题目详情',
										shadeClose : true,
										shade : false,
										maxmin : true, //开启最大化最小化按钮
										area : ['893px','600px' ],
										content : '/topic/topicDetail?topicId='+ topId
						     		});
								}
							});
						})
							$(".deleteBtn").bind("click", function() {
								//询问框
								var topId = $(this).attr("data-id");
								layer.confirm('确定删除？', {
									btn : [ '是', '否' ]
								//按钮
								}, function() {
									$.ajax({
										url : '/topic/delete/' + topId,
										dataType : 'json',
										type : 'post',
										success : function(data) {
											if (data.status == 200) {
												GetExcelTable(pageindex);
												layer.msg('删除成功', {
													icon : 1
												});
											} else {
												layer.msg('删除失败', {
													icon : 2
												});
											}
										}

									})
								}, function() {
									layer.msg('已取消删除', {
										icon : 2
									});
								});
							})

							//定义分页样式
							var totalCount = parseInt(data.totalRow);
							var pageSize = parseInt(data.pageSize);

							var pageNo = getParameter('pageIndex');//该参数为插件自带，不设置好，调用数据的时候当前页码会一直显示在第一页

							if (!pageNo) {
								pageNo = pageindex;
							}
							var totalPages = parseInt(data.totalPage);
							kkpager.generPageHtml({
								pno : pageNo,
								total : totalPages,
								totalRecords : totalCount,
								mode : 'click',
								click : function(n) {
									this.selectPage(pageNo);
									searchPage(n);
									return false;
								}
							}, true);

						},
						error : function(jqXHR, textStatus, errorThrown) {

							$("#main_content")
									.html(
											" <td colspan='6'><div class='alert alert-success col-sm-12' style='text-align:center'>"
													+ " 请求出错，请重试"
													+ " </div></td>");
						},
						complete : function(XMLHttpRequest, textStatus) {
							// 隐藏加载动画
							$("#loading").css("display", "none");
						}
					});
		}
		//init
		$(function() {
			$("#topicType").bind('change', function() {
				GetExcelTable(1);
			});

			$("#topicOrder").bind('change', function() {
				GetExcelTable(1);
			});

			$("#queryBtn").bind('click', function() {
				GetExcelTable(1);
			});

			$("#keyWord").on('input propertychange', function() {
				GetExcelTable(1);
			});
			GetExcelTable(1);
		});
		//ajax翻页
		function searchPage(n) {
			GetExcelTable(n);
		}

		function fmtDate(obj) {
			var date = new Date(obj);
			var y = 1900 + date.getYear();
			var m = "0" + (date.getMonth() + 1);
			var d = "0" + date.getDate();
			return y + "-" + m.substring(m.length - 2, m.length) + "-"
					+ d.substring(d.length - 2, d.length);
		}
	</script>
	<script type="text/javascript"
		src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

	<!--统计代码，可删除-->

</body>

</html>

